<template>
  <div>
    <el-dialog
      title="新增工单"
      :visible="isShow"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormer"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备编号：" prop="innerCode">
          <el-input v-model="ruleForm.innerCode" @change="getRoles"></el-input>
        </el-form-item>
        <el-form-item label="工单类型：" prop="taskStatus">
          <el-select v-model="ruleForm.taskStatus" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row v-if="flag === 1">
          <el-col :span="9">
            <span
              >补货数量：<i @click="openBuhuo" class="el-icon-bhqd bhqd"
                ><em> 补货清单</em></i
              >
            </span>
          </el-col>
        </el-row>
        <el-form-item label="运维人员：" prop="assignorId">
          <el-select v-model="ruleForm.assignorId" placeholder="请选择">
            <el-option
              v-for="repeo in repireList"
              :key="repeo.userId"
              :label="repeo.userName"
              :value="repeo.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button @click="handleClose">取消</el-button>
          <el-button class="submit" @click="submit">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <buhuoDetial ref="buhuo"></buhuoDetial>
  </div>
</template>

<script>
// import { mapMutations } from 'vuex'
// import judgeGdType from '@/Enums/gdStatus'
import { getGdType, getRepireList, createGd, channelList } from '@/api/gdInfo'
import buhuoDetial from './buhuoDetial.vue'
export default {
  components: {
    buhuoDetial
  },
  name: 'addDialog',
  props: ['isShow', 'editInfo', 'flag'],
  /*   props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }, */

  data () {
    return {
      ruleForm: {},
      rules: {
        innerCode: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        taskStatus: [{ required: true, message: '请选择', trigger: 'change' }],
        assignorId: [{ required: true, message: '请选择', trigger: 'change' }],
        desc: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]
      },
      list: [],
      repireList: [],
      createInfo: {
        assignorId: null,
        createType: null,
        desc: '',
        details: [],
        innerCode: '',
        productType: null,
        userId: null
      }
    }
  },

  mounted () {
    this.ruleForm = this.editInfo
    this.transmitToruleForm()
  },

  methods: {
    // ...mapMutations('gdinfo', ['removeGddetial']),
    handleClose () {
      this.$refs.ruleFormer.resetFields()
      this.ruleForm = {}
      this.list = []
      this.$emit('update:isShow', false)
    },
    // 将传递过来的reOpenAddInfo赋值给ruleForm
    async transmitToruleForm () {
      // this.ruleForm = this.reOpenAddInfo ? this.reOpenAddInfo : {}
      const res = await getGdType()
      // console.log(res)
      this.list = res
      if (this.ruleForm.userId) {
        const relist = await getRepireList(this.ruleForm.innerCode)
        // console.log(relist)
        this.repireList = relist.map((item) => {
          return { userId: item.userId, userName: item.userName }
        })
        // console.log(this.repireList)
      }

      // console.log(this.ruleForm)
    },
    async getRoles () {
      const relist = await getRepireList(this.ruleForm.innerCode)
      if (relist) {
        this.repireList = relist.map((item) => {
          return { userId: item.userId, userName: item.userName }
        })
      }
    },
    async submit () {
      await this.$refs.ruleFormer.validate()
      if (this.editInfo) {
        Object.keys(this.createInfo).forEach((key) => {
          if (this.ruleForm[key]) {
            this.createInfo[key] = this.ruleForm[key]
          } else if (key === 'productType') {
            this.createInfo[key] = this.ruleForm.taskType.typeId
          }
        })
        // console.log(this.createInfo)
        await createGd(this.createInfo)
      }
    },
    openBuhuo () {
      console.log(this.editInfo)
      this.$refs.ruleFormer.validateField(
        'innerCode',
        async (valid, message) => {
          if (this.ruleForm.innerCode) {
            const res = await channelList(this.ruleForm.innerCode)
            console.log(res)
            this.$refs.buhuo.flag = 0
            this.$refs.buhuo.tableData = res
            this.$refs.buhuo.dialogVisible = true
          }
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-icon-close:before {
  content: '\e6db';
}
.el-select {
  width: 100%;
}
/deep/.btn {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
/deep/.el-dialog {
  border-radius: 20px;
  .el-dialog__body {
    padding-top: 0 !important;
  }
  .el-dialog__header {
    padding: 0;
    padding-left: 20px;
    text-align: left;
  }
}
.submit {
  background: linear-gradient(135deg, #ff9743, #ff6122) !important;
  color: #fff;
  &:hover {
    background: linear-gradient(135deg, #ff9743, #dd3a05) !important;
  }
}
.bhqd {
  margin-left: 20px;
  color: #5f84ff;
  cursor: pointer;
}
</style>
